
<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
	<title>${result.dataSK.cityname}${.now?string('yyyy年MM月dd日')}天气-${result.dataSK.cityname}天气状况</title>
	<meta name="keywords" content="${result.dataSK.cityname}天气，${result.dataSK.cityname}今日天气，${result.dataSK.cityname}近7天天气，${result.dataSK.cityname}${.now?string('yyyy年MM月dd日')}天气"/> 
	<meta name="description" content="${result.dataSK.cityname}天气，${result.dataSK.cityname}今日天气，${result.dataSK.cityname}近7天天气，${result.dataSK.cityname}${.now?string('yyyy年MM月dd日')}天气"/>
	<link rel="stylesheet" type="text/css" href="/style/bootstrap5/css/bootstrap.min.css"/>
	<link rel="stylesheet" href="/style/bootstrap5/bootstrap-icons-1.11.3/font/bootstrap-icons.css">
	<style>
		.form-control:focus {border-color:none;outline: 0;box-shadow: none;}
		.content{width:1000px;margin:0 auto;margin-top:30px;}
		.header div{height:50px;line-height:50px;}
		.header i{width:30px;display:inline-block;font-size:20px;}
		.header i.split{width:50px; height:50px;}
		.header i.inner{position:absolute;left:30px;}
		.header input{width:500px;height:50px;line-height:50px;border:none;padding-left:50px;}
		.radius5{border-radius:5px;}
		.radius10{border-radius:10px;}
		.bgcommon{background:#f8fafc !important;}
		.bgblack{background:black;color:#fff;}
		.title{color:#0f172a;}
		.info .profile{padding-left:20px;line-height:35px;}
		.info .profile i{width:30px;display:inline-block;}
		.info .profile i.big{font-size:80px;display:block;}
		.info .profile .num{font-size:30px;}
		.info .category i{line-height:80px;font-size:24px;}
		.info .category .data{line-height:40px;} 
		.info .category .num{font-size:18px;}
		.info .temperature .row{flex:1;}
		.info .name,.dayinfo .name{color:#64758b;}
		.info .num,.dayinfo .num{color:#0f172a;}
		.days{height:40px;line-height:40px;}
	</style>
</head>
  
<body>
	<div class="container">
		<div class="content">
			<div class="header row">
				<div class="col radius5 bgcommon"><i class="bi bi-cloud-fill text-center fw-bold"></i>weather</div>
				<div class="col mx-2 position-relative">
					<i class="bi bi-search inner"></i>
					<input type="text" class="form-control bgcommon radius10" id="city" placeholder="Your City...">
				</div>
				<div class="col radius5">
					<i class="bi bi-arrow-repeat bgcommon text-center radius5 split fw-bold"></i>
					<i class="bi bi-moon-fill bgcommon text-center radius5 split fw-bold"></i>
				</div>
				<div class="col radius5 bgblack text-center"><i class="bi bi-github text-center fw-bold"></i>Support Project</div>
			</div>
			<h5 class="my-3 title">今日天气</h5>
			<div class="info row">
				<div class="col radius5 bgcommon profile p-3">
					<#assign wc = result.dataSK.weathercode?substring(1) /><#if wc?substring(0, 1) == '0'><#assign wc = wc?substring(1) /></#if>
					<i class="bi bi-${weatherMap[wc].icon1} big mt-3"></i><br/>
					<span class="num fw-bold">${result.dataSK.temp}°C</span><br/>
					<span>${result.dataSK.weather}</span>
					<hr>
					<span><i class="bi bi-geo-alt"></i>${result.dataSK.cityname}</span><br/>
					<span><i class="bi bi-calendar-date"></i>${result.dataSK.date}</span>
				</div>
				<div class="col mx-2">
					<div class="radius5 bgcommon row category mb-2 p-3">
						<div class="col-3"><i class="bi bi-wind"></i></div>
						<div class="col-9 data">
							<span class="name">风速</span><br/><span class="num">${result.dataSK.wse}</span>
						</div>
					</div>
					<div class="radius5 bgcommon row category mb-2 p-3">
						<div class="col-3"><i class="bi bi-speedometer"></i></div>
						<div class="col-9 data">
							<span class="name">气压</span><br/><span class="num">${result.dataSK.qy}</span>
						</div>
					</div>
					<div class="radius5 bgcommon row category mb-2 p-3">
						<div class="col-3"><i class="bi bi-sunrise"></i></div>
						<div class="col-9 data">
							<span class="name">日出</span><br/><span class="num">${result.day.sunUp}</span>
						</div>
					</div>
				</div>
				<div class="col me-2">
					<div class="radius5 bgcommon row category mb-2 p-3">
						<div class="col-3"><i class="bi bi-droplet"></i></div>
						<div class="col-9 data">
							<span class="name">湿度</span><br/><span class="num">${result.dataSK.sd}</span>
						</div>
					</div>
					<div class="radius5 bgcommon row category mb-2 p-3">
						<div class="col-3"><i class="bi bi-soundwave"></i></div>
						<div class="col-9 data">
							<span class="name">能见度</span><br/><span class="num">${result.dataSK.njd}</span>
						</div>
					</div>
					<div class="radius5 bgcommon row category mb-2 p-3">
						<div class="col-3"><i class="bi bi-sunset"></i></div>
						<div class="col-9 data">
							<span class="name">日落</span><br/><span class="num">${result.day.sunDown}</span>
						</div>
					</div>
				</div>
				<div class="col radius5 bgcommon d-flex flex-column temperature">
					<#list result.fc.f as item>
					<div class="row align-items-center">
						<div class="col-5 ps-3">
							<span class="name">${item.fj}</span><br/><span class="time">${item.fi}</span>
						</div>
						<div class="col-7 text-center">
							<span class="num">${item.fc}°C</span>
						</div>
					</div>	
					</#list>
				</div>
			</div>
			<h5 class="my-3 title">近5天天气情况</h5>
			<div class="days row">
				<div class="col bgblack radius5 text-center me-2">All Days</div>
				<#list result.fc.f as item>
				<div class="col bgcommon radius5 text-center me-2">${item.fi}&nbsp;&nbsp;${item.fj}</div>
				</#list>
			</div>
			<div class="dayinfo row my-3">
				<#list result.fc.f as item>
				<div class="col <#if item_index % 2 gt 0>mx-2</#if>">
					<#assign fa = item.fa /><#if fa?substring(0, 1) == '0'><#assign fa = fa?substring(1) /></#if>
					<#assign fb = item.fb /><#if fb?substring(0, 1) == '0'><#assign fb = fb?substring(1) /></#if>
					<div class="bgcommon radius5 text-center mb-2 row align-items-center py-3">
						<div class="col-6 text-start">
							<span class="name">${item.fe}</span><br/><span class="num">${item.fg}</span>
						</div>
						<div class="col-1 p-0"><i class="bi bi-${weatherMap[fa].icon1}"></i></div>
						<div class="col-5 text-start">
							<span class="num">${item.fc}°C</span><br/><span class="name">${weatherMap[fa].cn}</span>
						</div>
					</div>
					<div class="bgcommon radius5 text-center row align-items-center py-3">
						<div class="col-6 text-start">
							<span class="name">${item.ff}</span><br/><span class="num">${item.fh}</span>
						</div>
						<div class="col-1 p-0"><i class="bi bi-${weatherMap[fb].icon2}"></i></div>
						<div class="col-5 text-start">
							<span class="num">${item.fd}°C</span><br/><span class="name">${weatherMap[fb].cn}</span>
						</div>
					</div>
				</div>
				</#list>
			</div>
			
			<div class="mt-5">
				<h5>其他省份天气</h5>
				<div class="row">
					<#list cityList as province>
					<div class="col-1"><a href="/list-${province.nameen}">${province.name}</a></div>
					</#list>
				</div>
			</div>
		</div>
	</div>	
 	<script type="text/javascript" src="/style/js/jquery.min.js"></script>
    <script type="text/javascript" src="/style/bootstrap5/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/style/bootstrap5/js/bootstrap.bundle.min.js"></script>
</body>
</html>